<template>
  <div class="movie-card-box">
    <div class="movie-card-box-image" :style="{backgroundImage:`url(${props.data.imgUrl})`}">

    </div>
    <div class="movie-card-box-name">
      {{ props.data.name}}
    </div>
  </div>
</template>


<script lang="ts" setup>
const props = defineProps({
  data: {
    required: true
  }
})

</script>

<style lang="less" scoped>
.movie-card-box {
  width: 90%;
  height: 100%;
  position: relative;
  border-radius: 5px;
  align-items: center;

  .movie-card-box-image {
  height: 100%;
    width: 100%;
    overflow: hidden;
    position: absolute;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    background-position: center;
    background-repeat: no-repeat;
    background-size:100% 100%;
  }

  .movie-card-box-name {
    position: absolute;

    width: 100%;
    height: 25%;
    text-align: center;
    background-size: 100% 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    left: 0;
    bottom: 0;
    color: white;
    overflow: hidden;
    max-lines: 1;
    text-overflow: ellipsis;

  }
}
</style>